<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
      <script src="../zepto.min.js"></script>

</head>

<body ontouchstart>
         <div class="weui_cells_title">带图标、说明的列表项</div>
        <div class="weui_cells">
        
        
                    <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>标题文字</p>
                </div>
                <div class="weui_cell_ft">说明文字</div>
            </div>
            
            <div class="weui_cell">
                <div class="weui_cell_hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>标题文字</p>
                </div>
                <div class="weui_cell_ft">说明文字</div>
            </div>
            
            <div class="weui_cell">
                <div class="weui_cell_hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>标题文字</p>
                </div>
                <div class="weui_cell_ft">说明文字</div>
            </div>
            
            
        </div>
        
        
        
        <div class="weui_cells_title">带图标、说明、跳转的列表项</div>
        <div class="weui_cells weui_cells_access">

            <a class="weui_cell" href="javascript:;">
                <div class="weui_cell_hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>cell standard</p>
                </div>
                <div class="weui_cell_ft">说明文字</div>
            </a>
            <a class="weui_cell" href="javascript:;">
                <div class="weui_cell_hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>cell standard</p>
                </div>
                <div class="weui_cell_ft">说明文字</div>
            </a>
        </div>        
<!--------------------------------------------------------->        
       <div class="weui_panel weui_panel_access">
            <div class="weui_panel_hd">图文组合列表</div>
            <div class="weui_panel_bd">
                <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
                    <div class="weui_media_hd">
                        <img class="weui_media_appmsg_thumb" src="" alt="">
                    </div>
                    <div class="weui_media_bd">
                        <h4 class="weui_media_title">标题一</h4>
                        <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
                <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
                    <div class="weui_media_hd">
                        <img class="weui_media_appmsg_thumb" src="" alt="">
                    </div>
                    <div class="weui_media_bd">
                        <h4 class="weui_media_title">标题二</h4>
                        <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    </div>
                </a>
            </div>
            <a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
        </div>        
  <!----------------------------------------->      
         <div class="weui_panel weui_panel_access">
            <div class="weui_panel_hd">文字组合列表</div>
            <div class="weui_panel_bd">
                <div class="weui_media_box weui_media_text">
                    <h4 class="weui_media_title">标题一</h4>
                    <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                </div>
                <div class="weui_media_box weui_media_text">
                    <h4 class="weui_media_title">标题二</h4>
                    <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                </div>
            </div>
            <a href="javascript:void(0);" class="weui_panel_ft">查看更多</a>
        </div>       
        
<!----------------------------->        
        <div class="weui_panel">
            <div class="weui_panel_hd">小图文组合列表</div>
            <div class="weui_panel_bd">
                <div class="weui_media_box weui_media_small_appmsg">
                    <div class="weui_cells weui_cells_access">
                        <a class="weui_cell" href="javascript:;">
                            <div class="weui_cell_hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                            <div class="weui_cell_bd weui_cell_primary">
                                <p>文字标题</p>
                            </div>
                            <span class="weui_cell_ft"></span>
                        </a>
                        <a class="weui_cell" href="javascript:;">
                            <div class="weui_cell_hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                            <div class="weui_cell_bd weui_cell_primary">
                                <p>文字标题</p>
                            </div>
                            <span class="weui_cell_ft"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>        
 <!------------------------------> 
         <div class="weui_panel">
            <div class="weui_panel_hd">文字列表附来源</div>
            <div class="weui_panel_bd">
                <div class="weui_media_box weui_media_text">
                    <h4 class="weui_media_title">标题一</h4>
                    <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                    <ul class="weui_media_info">
                        <li class="weui_media_info_meta">文字来源</li>
                        <li class="weui_media_info_meta">时间</li>
                        <li class="weui_media_info_meta weui_media_info_meta_extra">其它信息</li>
                    </ul>
                </div>
            </div>
        </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
       
</body>
</html>
